import {View, Text, Image, Navigator} from '@tarojs/components'
import React from 'react';
import Taro from '@tarojs/taro';
import {Good} from '../../utils/server.interface'
import { gotoPage } from '../../utils/tools'
import './locallifeali.scss'
import Float from '../../components/float/float';
import {TARO_ENV} from "../../constants/api";

const LocalLifeAli: React.FC<{data: Good[]; isUser: boolean}> =  (props) => {
  const dataColor = Taro.getStorageSync('colorData');
  const data = props.data
  const top3 = (data && data.length > 2) ? data.slice(0, 3) : data
  const top6 = (data && data.length > 6) ? data.slice(3, 6) : data.slice(3, data.length)
  return(
    <View className={`shangxin-today ${TARO_ENV + 'shangxin-today'} ali`}>
      <View className={`shangxin-today-title ${TARO_ENV + 'shangxin-today-title'}`} style='background: linear-gradient(to right, #fbf1df, #fff);'>
        <View className='shangxin-today-title-left'>
          阿里本地生活
        </View>
        <View className='shangxin-today-title-right'>
          <View className='ret' onClick={() => gotoPage('/other/aliLocalLife/local-life/index')}>
            更多
          </View>
        </View>
      </View>
      <View className='ali-top3'>
        <View style='height: 20px' />
        <View className='shangxin-today-block'>
          {
            top3 && top3.map((item, index) => (
              <View className={index == 0? `shangxin-today-block-item m-l-0`: `shangxin-today-block-item`} key={index}>
                <Navigator key={item.id} className='scroll-item' url={'/common/limited/localdetailali?locationId=' + item.cityId + '&productId=' + item.id}>
                  <View className='shangxin-today-block-item-image'>
                    <Image mode='aspectFill' src={item.mainPicture} className='image' />
                    {!props.isUser && !!item.sellerProfit && process.env.DISTINGUISH_IDENTITY && <View className='commission_price'>
                    <Text className='commission_price-text'>分享赚</Text><Text className='price-symbol font-family-price'>￥</Text><Float value={item.sellerProfit} />
                  </View>}
                  </View>
                  <View className='shangxin-today-block-item-title'>
                    {item.title}
                  </View>
                  <View className={`shangxin-today-block-item-bottom ${!(item.discount || item.is_activity == 1) && 'baseline'}`}>
                    <View className='shangxin-today-block-item-bottom-price' style={`color: ${dataColor.priceColor};`}>
                      <Text className='shangxin-today-block-item-bottom-price-before'>￥</Text>
                      <View className='view-inline'><Float value={item.activityPrice || 0} /></View>
                    </View>
                    <View className='shangxin-today-block-item-bottom-original'>
                      {item.originalPrice || 0}
                    </View>
                  </View>
                </Navigator>
              </View>
            ))
          }
        </View>
      </View>
      <View
        className='category ali-top6'
      >
        {
          top6 && top6.map((item: any) => (
            <Navigator key={item.id} className='scroll-item' url={'/common/limited/localdetailali?locationId=' + item.cityId + '&productId=' + item.id}>
              <View className='items'>
                <View className='items-left'>
                  <Image mode='aspectFill' className='img' src={item.mainPicture} />
                  {!!item.priceRate &&
                  <Text className='discount' style={`background-color: ${dataColor.priceColor};`}><Text
                    className='font-family-price'
                  >{(item.priceRate*10).toFixed(1)}</Text>折</Text>}
                </View>
                <View className='items-right'>
                  <View className='right-top'>
                    <View className='pro-name-ali'>{item.title}</View>
                  </View>
                  <View className='end-flex'>
                    <View className='right-price'>
                      <View className='price'>
                        {!!item.activityPrice &&
                        <View className='true-price font-family-price'>
                          <Text className='font-family-price symbol'>￥</Text>
                          <Float value={item.activityPrice} />
                        </View>}
                        {!!item.originalPrice &&
                        <View className='price-right font-family-price'>￥{item.originalPrice || 0}</View>}
                      </View>
                      <View className='recommendation-block-item-bottom-right'>
                        {!props.isUser && !!item.sellerProfit && process.env.DISTINGUISH_IDENTITY ? <View className='share-earn'>
                          <View className='share-left'>分享赚</View>
                          <View className='price'>
                            <Text>￥</Text>
                            <View className='true-price-share font-family-price inline'>
                              <Float value={item.sellerProfit || 0} />
                            </View>
                          </View>
                        </View> : <View className='snapped-up'>立即抢购</View>}
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            </Navigator>
          ))
        }
      </View>
    </View>
  )
}
LocalLifeAli.defaultProps = {
  data: []
}
export default LocalLifeAli
